<template>
  <div
    class="chart-scrollbar layout-view-bg-white"
    :style="{ height: `calc(100vh - ${initTagViewHeight}` }"
  >
    <div class="chart-warp">
      <div class="chart-warp-top">
        <ChartHead />
      </div>
      <div class="chart-warp-bottom">
        <!-- 左边 -->
        <div class="big-data-down-left">
          <div class="flex-warp-item">
            <div class="flex-warp-item-box">
              <div class="flex-title">天气预报</div>
              <div class="flex-content">
                <div class="sky">
                  <SvgIcon name="elementSunny" class="sky-left" />
                  <div class="sky-center">
                    <div class="mb2">
                      <span>多云转晴</span>
                      <span>东南风</span>
                      <span class="span ml5">良</span>
                    </div>
                  </div>
                  <div class="sky-right">
                    <span>25</span>
                    <span>°C</span>
                  </div>
                </div>
                <div class="sky-dd">
                  <div
                    class="sky-dl"
                    v-for="(v, k) in skyList"
                    :key="k"
                    :class="{ 'sky-dl-first': k === 1 }"
                  >
                    <div>{{ v.v1 }}</div>
                    <div v-if="v.type === 'title'">{{ v.v2 }}</div>
                    <div v-else>
                      <SvgIcon :name="v.v2" />
                    </div>
                    <div>{{ v.v3 }}</div>
                    <div class="tip">{{ v.v5 }}</div>
                    <div>{{ v.v7 }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex-warp-item">
            <div class="flex-warp-item-box">
              <div class="flex-title">当前设备状态</div>
              <div class="flex-content flex-content-overflow">
                <div class="d-states">
                  <div class="d-states-item">
                    <SvgIcon name="elementOdometer" class="i-bg1" />
                    <div class="d-states-flex">
                      <div class="d-states-item-label">园区设备数</div>
                      <div class="d-states-item-value">99</div>
                    </div>
                  </div>
                  <div class="d-states-item">
                    <SvgIcon name="elementFirstAidKit" class="i-bg2" />
                    <div class="d-states-flex">
                      <div class="d-states-item-label">预警设备数</div>
                      <div class="d-states-item-value">10</div>
                    </div>
                  </div>
                  <div class="d-states-item">
                    <SvgIcon name="elementVideoPlay" class="i-bg3" />
                    <div class="d-states-flex">
                      <div class="d-states-item-label">运行设备数</div>
                      <div class="d-states-item-value">20</div>
                    </div>
                  </div>
                </div>
                <div class="d-btn">
                  <div class="d-btn-item" v-for="(v, k) in dBtnList" :key="k">
                    <i class="d-btn-item-left el-icon-money"></i>
                    <SvgIcon name="elementMoney" class="d-btn-item-left" />
                    <div class="d-btn-item-center">
                      <div>{{ v.v2 }}|{{ v.v3 }}</div>
                    </div>
                    <div class="d-btn-item-eight">{{ v.v4 }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex-warp-item">
            <div class="flex-warp-item-box">
              <div class="flex-title">近30天预警总数</div>
              <div class="flex-content">
                <div style="height: 100%" ref="chartsWarningRef"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 中间 -->
        <div class="big-data-down-center">
          <div class="big-data-down-center-one">
            <div class="big-data-down-center-one-content">
              <div style="height: 100%" ref="chartsCenterOneRef"></div>
            </div>
          </div>
          <div class="big-data-down-center-two">
            <div class="flex-warp-item-box">
              <div class="flex-title">
                <span>当前设备监测</span>
                <span class="flex-title-small">单位：次</span>
              </div>
              <div class="flex-content">
                <div class="flex-content-left">
                  <div class="monitor-item" v-for="(v, k) in chartData4List" :key="k">
                    <div class="monitor-wave">
                      <div class="monitor-z-index">
                        <div class="monitor-item-label">{{ v.label }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="flex-content-right">
                  <div style="height: 100%" ref="chartsMonitorRef"></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右边 -->
        <div class="big-data-down-right">
          <div class="flex-warp-item">
            <div class="flex-warp-item-box">
              <div class="flex-title">
                <span>近7天产品追溯扫码统计</span>
                <span class="flex-title-small">单位：次</span>
              </div>
              <div class="flex-content">
                <div style="height: 100%" ref="chartsSevenDaysRef"></div>
              </div>
            </div>
          </div>
          <div class="flex-warp-item">
            <div class="flex-warp-item-box">
              <div class="flex-title">当前任务统计</div>
              <div class="flex-content">
                <div class="task">
                  <div class="task-item task-first-item">
                    <div class="task-item-value task-first">25</div>
                    <div class="task-item-label">待办任务</div>
                  </div>
                  <div class="task-item">
                    <div class="task-item-box task1">
                      <div class="task-item-value">12</div>
                      <div class="task-item-label">施肥</div>
                    </div>
                  </div>
                  <div class="task-item">
                    <div class="task-item-box task2">
                      <div class="task-item-value">3</div>
                      <div class="task-item-label">施药</div>
                    </div>
                  </div>
                  <div class="task-item">
                    <div class="task-item-box task3">
                      <div class="task-item-value">5</div>
                      <div class="task-item-label">农事</div>
                    </div>
                  </div>
                </div>
                <div class="progress">
                  <div class="progress-item">
                    <span>施肥率</span>
                    <div class="progress-box">
                      <el-progress :percentage="70" color="#43bdf0"></el-progress>
                    </div>
                  </div>
                  <div class="progress-item">
                    <span>施药率</span>
                    <div class="progress-box">
                      <el-progress :percentage="36" color="#43bdf0"></el-progress>
                    </div>
                  </div>
                  <div class="progress-item">
                    <span>农事率</span>
                    <div class="progress-box">
                      <el-progress :percentage="91" color="#43bdf0"></el-progress>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex-warp-item">
            <div class="flex-warp-item-box">
              <div class="flex-title">
                <span>近7天投入品记录</span>
                <span class="flex-title-small">单位：件</span>
              </div>
              <div class="flex-content">
                <div style="height: 100%" ref="chartsInvestmentRef"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  toRefs,
  reactive,
  computed,
  onMounted,
  getCurrentInstance,
  watch,
  nextTick,
  onActivated,
} from "vue";
 
import { useThemeConfigStateStore } from "/@/stores/themeConfig";
import { useTagsViewRoutesStore } from "/@/stores/tagsViewRoutes";
import ChartHead from "/@/views/demo/chart/head.vue";
import * as echarts from "echarts";
import "echarts-wordcloud";
import { skyList, dBtnList, chartData4List } from "/@/views/demo/chart/chart";
export default {
  name: "chartIndex",
  components: { ChartHead },
  setup() {
    const { proxy } = getCurrentInstance() as any;
     
    const theme = useThemeConfigStateStore();
    const tagsViewRoutes = useTagsViewRoutesStore();
    const state = reactive({
      tagViewHeight: "",
      skyList,
      dBtnList,
      chartData4List,
      myCharts: [],
    });
    // 设置主内容的高度
    const initTagViewHeight = computed(() => {
      let { isTagsview } = theme.themeConfig;
      let { isTagsViewCurrenFull } = tagsViewRoutes;
      if (isTagsViewCurrenFull) {
        return `30px`;
      } else {
        if (isTagsview) return `114px`;
        else return `80px`;
      }
    });
    // 初始化中间图表1
    const initChartsCenterOne = () => {
      const myChart = echarts.init(proxy.$refs.chartsCenterOneRef);
      const option = {
        grid: {
          top: 15,
          right: 15,
          bottom: 20,
          left: 30,
        },
        tooltip: {},
        series: [
          {
            type: "wordCloud",
            sizeRange: [12, 40],
            rotationRange: [0, 0],
            rotationStep: 45,
            gridSize: Math.random() * 20 + 5,
            shape: "circle",
            width: "100%",
            height: "100%",
            textStyle: {
              fontFamily: "sans-serif",
              fontWeight: "bold",
              color: function () {
                return `rgb(${[
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                ].join(",")})`;
              },
            },
            data: [
              { name: "PandaUi", value: 520 },
              { name: "PandaX", value: 520 },
              { name: "next-admin", value: 500 },
              { name: "更名", value: 420 },
              { name: "智慧农业", value: 520 },
              { name: "男神", value: 2.64 },
              { name: "好身材", value: 4.03 },
              { name: "校草", value: 24.95 },
              { name: "酷", value: 4.04 },
              { name: "时尚", value: 5.27 },
              { name: "阳光活力", value: 5.8 },
              { name: "初恋", value: 3.09 },
              { name: "英俊潇洒", value: 24.71 },
              { name: "霸气", value: 6.33 },
              { name: "腼腆", value: 2.55 },
              { name: "蠢萌", value: 3.88 },
              { name: "青春", value: 8.04 },
              { name: "网红", value: 5.87 },
              { name: "萌", value: 6.97 },
              { name: "认真", value: 2.53 },
              { name: "古典", value: 2.49 },
              { name: "温柔", value: 3.91 },
              { name: "有个性", value: 3.25 },
              { name: "可爱", value: 9.93 },
              { name: "幽默诙谐", value: 3.65 },
            ],
          },
        ],
      };
      myChart.setOption(option);
      state.myCharts.push(myChart);
    };
    // 初始化近7天产品追溯扫码统计
    const initChartsSevenDays = () => {
      const myChart = echarts.init(proxy.$refs.chartsSevenDaysRef);
      const option = {
        grid: {
          top: 15,
          right: 15,
          bottom: 20,
          left: 30,
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["1天", "2天", "3天", "4天", "5天", "6天", "7天"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "邮件营销",
            type: "line",
            stack: "总量",
            data: [12, 32, 11, 34, 90, 23, 21],
          },
          {
            name: "联盟广告",
            type: "line",
            stack: "总量",
            data: [22, 82, 91, 24, 90, 30, 30],
          },
          {
            name: "视频广告",
            type: "line",
            stack: "总量",
            data: [50, 32, 18, 14, 90, 30, 50],
          },
        ],
      };
      myChart.setOption(option);
      state.myCharts.push(myChart);
    };
    // 初始化近30天预警总数
    const initChartsWarning = () => {
      const myChart = echarts.init(proxy.$refs.chartsWarningRef);
      const option = {
        grid: {
          top: 50,
          right: 20,
          bottom: 30,
          left: 30,
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [20, 50],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: [
              { value: 40, name: "监测设备预警" },
              { value: 38, name: "天气预警" },
              { value: 32, name: "任务预警" },
              { value: 30, name: "病虫害预警" },
            ],
          },
        ],
      };
      myChart.setOption(option);
      state.myCharts.push(myChart);
    };
    // 初始化当前设备监测
    const initChartsMonitor = () => {
      const myChart = echarts.init(proxy.$refs.chartsMonitorRef);
      const option = {
        grid: {
          top: 15,
          right: 15,
          bottom: 20,
          left: 30,
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            itemStyle: {
              color: "#289df5",
              borderColor: "#289df5",
              areaStyle: {
                type: "default",
                opacity: 0.1,
              },
            },
            data: [20, 32, 31, 34, 12, 13, 20],
            type: "line",
            areaStyle: {},
          },
        ],
      };
      myChart.setOption(option);
      state.myCharts.push(myChart);
    };
    // 初始化近7天投入品记录
    const initChartsInvestment = () => {
      const myChart = echarts.init(proxy.$refs.chartsInvestmentRef);
      const option = {
        grid: {
          top: 15,
          right: 15,
          bottom: 20,
          left: 30,
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: ["1天", "2天", "3天", "4天", "5天", "6天", "7天"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [10, 20, 15, 80, 70, 11, 30],
            type: "bar",
          },
        ],
      };
      myChart.setOption(option);
      state.myCharts.push(myChart);
    };
    // 批量设置 echarts resize
    const initEchartsResizeFun = () => {
      nextTick(() => {
        for (let i = 0; i < state.myCharts.length; i++) {
          state.myCharts[i].resize();
        }
      });
    };
    // 批量设置 echarts resize
    const initEchartsResize = () => {
      window.addEventListener("resize", initEchartsResizeFun);
    };
    // 页面加载时
    onMounted(() => {
      initChartsCenterOne();
      initChartsSevenDays();
      initChartsWarning();
      initChartsMonitor();
      initChartsInvestment();
      initEchartsResize();
    });
    // 由于页面缓存原因，keep-alive
    onActivated(() => {
      initEchartsResizeFun();
    });
    // 监听 vuex 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
    watch(
      () => tagsViewRoutes.isTagsViewCurrenFull,
      () => {
        initEchartsResizeFun();
      }
    );
    return {
      initTagViewHeight,
      ...toRefs(state),
    };
  },
};
</script>

<style scoped lang="scss">
@import "chart";
</style>
